<template>
    <div>
        <router-view></router-view>
        <div class="weui-flex weui-fixed-btm nav vux-1px-t">
            <router-link tag="div" exact class="weui-flex__item" to="/">
                <div class="weui-fixed-btn">
                    <i class="i1"></i>首页
                </div>
            </router-link>
            <router-link tag="div" class="weui-flex__item" to="/Mall">
                <div class="weui-fixed-btn">
                    <i class="i2"></i>商城
                </div>
            </router-link>
            <router-link tag="div" class="weui-flex__item" to="/Find">
                <div class="weui-fixed-btn">
                    <i class="i3"></i>发现
                </div>
            </router-link>
            <router-link tag="div" class="weui-flex__item" to="/My">
                <div class="weui-fixed-btn">
                    <i class="i4"></i>我的
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
.weui-fixed-btm{position: fixed;left: 0;bottom:0;width: 100%; background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;}
.weui-fixed-btm .weui-flex__item{ text-align: center;}
.weui-fixed-btm .weui-fixed-btn{ padding:9px 0 4px; display: block;  font-size: 14px; color:#afafaf;}
.weui-fixed-btm .weui-fixed-btn i{ width: 22px; height: 22px; background-size:26px; display: block; margin:0 auto; }
.weui-flex__item.on .weui-fixed-btn{ color:#f80762; }
.weui-fixed-btm .weui-fixed-btn .i1{ background:url(../assets/images/h1.png) no-repeat; background-size:22px;}
.weui-fixed-btm .weui-fixed-btn .i2{ background:url(../assets/images/h2.png) no-repeat; background-size:22px;}
.weui-fixed-btm .weui-fixed-btn .i3{ background:url(../assets/images/h3.png) no-repeat; background-size:22px;}
.weui-fixed-btm .weui-fixed-btn .i4{ background:url(../assets/images/h4.png) no-repeat; background-size:22px;}

.weui-flex__item.on .weui-fixed-btn .i1{ background:url(../assets/images/h11.png) no-repeat; background-size:22px;}
.weui-flex__item.on .weui-fixed-btn .i2{ background:url(../assets/images/h22.png) no-repeat; background-size:22px;}
.weui-flex__item.on .weui-fixed-btn .i3{ background:url(../assets/images/h33.png) no-repeat; background-size:22px;}
.weui-flex__item.on .weui-fixed-btn .i4{ background:url(../assets/images/h44.png) no-repeat; background-size:22px;}

</style>

